<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=2,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<link rel="stylesheet" href="css/tg_mobile_reset.css">
	<title>单品组件test</title>
	<style>
		.tab-header-wp{
		    width: 345px;
		    white-space: nowrap;
		    margin: 16px auto 14px;
		    background-color: #fff;
		    border: none;
		}
		.tab-header-wp>li {
			line-height: 32.5px;
		    height: 32.5px;
		    color: #333;
		    font-size: 16px;
		    float: left; 
		    text-align: center;
		}
		.tab-header-wp>li .inner-text {
			width: 80%;
			display: inline-block;
		}
		.tab-header-wp>li.on .inner-text {
		    border-bottom: 2px solid #1DBE72;
			color: #1DBE72;
		}
		.tab-body-wp {
			width: 345px;
			margin: 0 auto;
			overflow: hidden;
		}
		.tab-body-wp>li.t-body {
			width: 375px;
		}
		.t-body .pdt-wp:nth-child(1),.t-body .pdt-wp:nth-child(2) {
			margin-top: 0;
		}
		.t-body .pdt-wp.is-wide:nth-child(2) {
			margin-top: 10px;
		}
		.t-body>.pdt-wp {
			width: 166px;
			margin-right: 12px;
			margin-top: 10px;
			float: left;
		}
		.t-body>.pdt-wp .img-wp {
			width: 100%;
			height: 125px;
			position: relative;
		}
		.t-body>.pdt-wp .img-wp img {
			width: 100%;
			height: 100%;
		}
		.t-body .pdt-price {
			position: absolute;
			font-size: 12px;
		    color: #FFFFFF;
		    display: inline-block;
		    right: 0;
		    bottom: 0;
		    background: rgba(0, 0, 0, 0.4);
		    height: 25px;
		    padding: 0 10px;
		    line-height: 25px;
		}
		.t-body .pdt-desc {
			font-size: 12px;
		    color: #333333;
		    text-overflow: ellipsis;
		    display: -webkit-box;
		    -webkit-line-clamp: 2;
		    overflow: hidden;
		    -webkit-box-orient: vertical;
		    height: 40px;
		    line-height: 20px;
		    margin-top: 5px;
		    padding-left: 5px;
		}
		/*宽样式设定*/
		.t-body>.pdt-wp.is-wide {
			width: 345px;/*与外容器宽度保持一致*/
			position: relative;
		}
		.t-body>.pdt-wp.is-wide .img-wp {
			position: static;
			width: 345px;
    		height: 256px;
		}
		.t-body>.pdt-wp.is-wide .img-wp img {
			width: 100%;
			height: 100%;
		}
		.t-body>.pdt-wp.is-wide .wide-fr {
			line-height: 40px;
		}
		.t-body>.pdt-wp.is-wide .pdt-desc {
			float: left;
		}
		.t-body>.pdt-wp.is-wide .pdt-price-fr {
			float: right;
			font-size: 10px;
		    color: #ff4c4c;
		    margin-right: 2px;
		}
	</style>
</head>
<body>
	<div id="app">
		<div class="zc-tab-wp">
			<ul class="tab-header-wp clearfix">
				<li v-for="(tab,index) in ren.tabs" class="t-head" :class="{on:tmpIndex===index}" :style="headLi" @click="clkHead(index)">
					<span class="inner-text">{{tab.tabLabel}}</span>
				</li>
			</ul>
			<ol class="tab-body-wp">
				<li class="t-body" v-for="(tab,index) in ren.tabs" v-show="index===tmpIndex">
					<div class="pdt-wp clearfix" v-for="(pdt,pIndex) in dataArr[index]" :class="{'is-wide':ifWide}" >
						<div class="img-wp">
							<img :src="pdt.coverImg">
							<div class="pdt-price" v-if="!ifWide">￥<span>{{pdt.price}}</span>起</div>
						</div>
						<div class="pdt-desc " :class="{'wide-fr':ifWide}">{{pdt.imgDesc}}</div>
						<div class="pdt-price-fr wide-fr" v-if="ifWide" :class="{'wide-fr':ifWide}">￥<span>{{pdt.price}}</span>起</div>
					</div>
				</li>
			</ol>
		</div>
	</div>
	<script src="./lib/rem.js"></script>
	<script src="./lib/vue.min.js"></script>
	<script src="./lib/axios.min.js"></script>
	<script>
		var bus = new Vue();
		bus.head = window.location.hostname;
		bus.urlObj = {
			"106.14.239.108":"https://test-javaapis.tgljweb.com",
			"139.196.252.26":"pre-javaapis.tgljweb.com",
			"admin.tgljweb.com":"https://javaapis.tgljweb.com",
			"testadmin.tgljweb.com":"https://test-javaapis.tgljweb.com",
			"default":"https://test-javaapis.tgljweb.com"
		};
		bus.urlHead = (bus.urlObj)[bus.head||'default'];
		bus.imgHead = 'http://img.tgljweb.com';
		var app = new Vue({
			el:'#app',
			data:{
				ren:{
					"type":"sgl",
					"anchorLocaltion":"",
					"sort":"narrow",
					// "sort":"wide",
					"tabs":[
						{
							"dataCheck":"beijinglvyuou",
							"tabLabel":"北京旅游",
							"productType":[
							    {
							    	"productId":"123|234",
							    	"travelSecondType":3,
							    	"type":3
							    },
							    {
							    	"productId":"122|133",
							    	"travelSecondType":3,
							    	"type":3
							    }
							]
						},
						{
							"dataCheck":"guangzhouminsu",
							"tabLabel":"广州民宿",
							"productType":[
							    {
							    	"productId":"1769575|1814892|1769581",
							    	"travelSecondType":3,
							    	"type":1
							    }
							]
						}
					]
				},
				dataArr:[],
				tmpIndex:0,
				fnObj:{
					3:'getTravel',
					2:'getHotel',
					1:'getStay'
				}
			},
			methods:{

				clkHead(i) {
					this.tmpIndex=i;
				},
				renData() { //每一个tab返回一个数组，将这个数组push到dataArr
					var vm = this,
						arr = vm.ren.tabs,
						len = arr.length,
						i = 0;
					for(i=0;i<len;i++) {
						// vm.dataArr.push(vm.getArr(),i); 
						vm.getArr(arr[i].productType,i)
					}
				},
				getArr(arr,index) { 
					//遍历一个productType数组，对于不同类型的产品(obj.type)，调用不同的方法，每一个方法都是依据产品id（数组形式需遍历），返回一个对象
					var vm = this,tmpArr = [],i=0,len = arr.length, tmpFn=null;
					
					for(i=0;i<len;i++) {
						// if(arr[i].type!=3){continue;}//暂只测试旅行
						if(arr[i].type==2){continue;}//旅行通过，测试民宿，屏蔽酒店数据
						tmpFn = (vm.fnObj)[arr[i].type];
						tmpFn = vm[tmpFn];
						tmpFn(arr[i],index);
					};
				},
				getTravel(obj,index) {//旅行
					var vm = this,tmp = obj.productId.split('|'),len=tmp.length,i=0,type = obj.travelSecondType;
					var secType = {
						2:'/api/activity/detailshtml',//当地活动
						3:'/api/higo/detailshtml',//主题线路
						7:'/api/travelimpress/detailshtml',//印象随笔
						8:'/api/travelnote/detailshtml' //游记攻略
					};
					var url = bus.urlHead+secType[type];//整合后的请求路径
					for(;i<len;i++) {
						axios.get(url,{
							params:{
								tid:tmp[i],
								uid:''	    
							}
						}).then(function(res){
							// console.log(res);
							var data = res.data.data;
							var tmpObj = {};
							tmpObj.coverImg = (data.pics||data.titlePic)[0];//图片地址，取轮播图的第一张，活动主题为titlePic，游记印象为pics
							tmpObj.imgDesc = data.name;//对该产品的描述，旅行四项字段统一
							tmpObj.price = data.price||'0';//对于游记或者印象没有price字段则默认为字符串'0'
							tmpObj.productId = data.tid;
							// console.log(tmpObj);
							vm.dataArr[index].push(tmpObj); //将渲染对象push到渲染数组中!important
						}, function(res){
							console.log('ajax error')
						})
					}
				},	
				getStay(obj,index) {//民宿
					var vm = this,tmp = obj.productId.split('|'),len=tmp.length,i=0;
					var url = bus.urlHead+'/api/house/guest/v3.1.3/getdetailsnew';
					for(;i<len;i++) {
						axios.post(url,{
							houseId:tmp[i],
							uid:null
						}).then(function(res){
							var data = res.data.data;
							var tmpObj = {
								'coverImg':(bus.imgHead +'/' + data.houseImgs[0].imgUrl),
								'imgDesc' :data.title,
								'price'   :data.price,
								'productId':data.houseId
							};
							vm.dataArr[index].push(tmpObj);
							// console.log(curr);
						}, function(res) {
							console.log('ajax error');
						})
					}
				},
				getHotel(obj,index) {//酒店
					
				},

			},
			computed:{
				ifWide() {
					return this.ren.sort==='wide';
				},
				headLi() {
					var len = this.ren.tabs.length;
					var w = 1/len*100+'%';
					return {width:w};
				}
			},
			created() {
				var vm = this;
				var arr = vm.ren.tabs;
				var len = arr.length;
				vm.renData();
				for(var i=0;i<len;i++) { //确定tab-body的渲染arr的外层轮廓（n个空数组，后边向这几个空数组里push渲染对象）
					vm.dataArr.push([]);
				}

			}
		})

	</script>
</body>
</html>